<template>
    <el-dialog :model-value="visible" :title="title" :width="width + 'px'" append-to-body :before-close="onClose">
        <!--弹框的内容：插槽-->
        <div class="container" :style="{ height: height + 'px' }">
            <slot name="content"></slot>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="danger" @click="onClose">取消</el-button>
                <el-button type="primary" @click="onConfirm">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
//定义参数的类型
interface DialogProps {
    title: string;//弹框标题
    visible: boolean;//控制弹框显示和隐藏
    width: number;
    height: number;
}
//子组件接受父组件传递的参数
const props = withDefaults(defineProps<DialogProps>(), {//指定默认值
    title: '',
    visible: false,
    width: 630,
    height: 280,
})
//注册事件
const emits = defineEmits(['onClose', 'onConfirm'])
//弹窗关闭
const onClose = () => {
    emits('onClose')
}
//弹窗确定
const onConfirm = () => {
    emits('onConfirm')
}
</script>

<style lang="scss">
.container {
    overflow-x: initial;
    overflow-y: auto;
}
    .el-dialog {
        padding: 0;
        border-radius: 10px; // 圆角边框
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1); // 添加阴影

        .el-dialog__header {
            border-top-left-radius: 10px;
            /* 左上角圆角 */
            border-top-right-radius: 10px;
            /* 右上角圆角 */
            background-color: #3498db; // 修改背景颜色
            padding: 15px; // 增加内边距

            .el-dialog__title {
                color: #fff; // 字体颜色
                font-size: 18px; // 字体大小
            }

            .el-dialog__headerbtn {
                .el-dialog__close {
                    color: #fff; // 关闭按钮颜色
                    font-size: 18px; // 关闭按钮大小
                }
            }
        }

        .el-dialog__body {
            padding: 20px; // 增加内边距
            color: #333; // 文本颜色
            font-size: 14px; // 文本大小
        }

        .el-dialog__footer {
            border-top: none; // 移除底部边框
            padding: 5px; // 增加内边距
            text-align: right; // 按钮居右

            .el-button {
                border-radius: 20px; // 按钮圆角
                padding: 8px 20px; // 按钮内边距
                margin: 0 5px; // 按钮外边距

                &.el-button--primary {
                    background-color: #34db9b ; // 主要按钮背景色
                    border-color: #42b983; // 主要按钮边框色
                }

                &.el-button--danger {
                    background-color: #e74c3c; // 危险按钮背景色
                    border-color: #e74c3c; // 危险按钮边框色
                }
            }
        }
    }
</style>